<template>
  <div class="order">
    <h3>饿了么</h3>
    <div class="title">
        <span @click="currentIndex=index" :class="{active:currentIndex == index}" v-for="(item,index) in titleList" :key="index">{{item}}</span>
    </div>
    <div class="goods">
        <div class="info" v-for="(item,index) in orderList" :key="index">
            <div class="left">
                <span>{{item.name}}</span>
                <div class="img">
                    <img :src="item.pic1" alt="">
                    <img :src="item.pic2" alt="">
                </div>
            </div>
            <div class="right">
                <span>已送达</span>
                <span>{{item.price}}</span>
                <span>共{{item.num}}件</span>
                <span>再来一单</span>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
let img1 = "https://img0.baidu.com/it/u=680104103,3294962213&fm=253&fmt=auto&app=138&f=JPEG?w=310&h=310"
let img2 = "https://img1.baidu.com/it/u=401700138,2978737378&fm=253&fmt=auto&app=138&f=JPEG?w=250&h=250"
export default {
    data(){
        return{
            currentIndex:0,
            titleList:['全部','代消费','待评价','退款'],
            orderList:[
                {name:'纯手工饺子(凤城九路店）',pic1:img1,pic2:img2,price:'￥17.8',num:'2'},
                {name:'纯手工饺子(凤城九路店）',pic1:img1,pic2:img2,price:'￥17.8',num:'2'},
                {name:'纯手工饺子(凤城九路店）',pic1:img1,pic2:img2,price:'￥17.8',num:'2'},
                {name:'纯手工饺子(凤城九路店）',pic1:img1,pic2:img2,price:'￥17.8',num:'2'}
            ]
        }
    }
}
</script>

<style>
.order{
    background-color: azure;
}
*{
    margin: 0;padding: 0;
}
.order>h3{
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
}
.title{
    width: 90%;
    margin: 20px 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
}
.title>.active{
    font-weight: bold;
}
.goods{
    margin: 0px 10px;
}
.info{
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    border-radius: 20px;
    height: 120px;
    padding: 10px 10px 50px 10px;
    margin: 20px 0px;
}
.left>span{
    font-size: 20px;
    font-weight: bold;
}
.left img{
    margin-top: 20px;
    width: 40%;
    border-radius: 20px;
}
.left img:nth-child(1){
    margin-right: 10px;
}
.right>span{
    display: block;
    display: flex;
    justify-content: center;
}
.right>span:nth-child(1){
    color: #b0b0b0;
    margin-bottom: 30px;
}
.right>span:nth-child(3){
    color: #b0b0b0;
    line-height: 30px;
}
.right>span:nth-child(4){
    margin-top: 10px;
    width: 80px;
    height: 30px;
    border: 1px solid lightseagreen;
    border-radius: 20px;
    line-height: 30px;
    text-align: center;
}
</style>